<!DOCTYPE html>
<html>

<head>
	<title>Adaptive Cards Designer (No Microsoft Hosts)</title>
	<script src="https://unpkg.com/adaptivecards@latest/dist/adaptivecards.min.js"></script>
	<script src="https://unpkg.com/adaptive-expressions@4/lib/browser.js"></script>
	<script src="https://unpkg.com/adaptivecards-templating@latest/dist/adaptivecards-templating.min.js"></script>

	<script src="https://unpkg.com/markdown-it@8.4.0/dist/markdown-it.min.js"></script>

	<style type="text/css">
		* {
			box-sizing: border-box;
		}

		body {
			margin: 0;
		}
	</style>

	<script type="text/javascript">
		window.onload = function() {

			// Prepare a list of host containers
			// This is not required. When no list is passed (empty array or null), the designer
			// uses a default built-in host container, and the host container picker in the
			// toolbar is hidden.
			let hostContainers = [];
			let designer = new ACDesigner.CardDesigner(hostContainers);

			require.config({
				paths: {
					'vs': 'https://unpkg.com/monaco-editor@0.17.1/min/vs'
				}
			});
			require(['vs/editor/editor.main'], function () {
				designer.monacoModuleLoaded();
			});

			designer.attachTo(document.getElementById("designerRootHost"));

		};
	</script>
</head>

<body>
	<div style="font-family: 'Segoe UI', sans-serif; font-size: 14px; display: flex; flex-direction: column; height: 100vh;">
		<div id="designerRootHost"></div>
	</div>
</body>

<!-- load monaco loader after designer is loaded so that it doesn't affect the designer code -->
<script src="https://unpkg.com/monaco-editor@0.17.1/min/vs/loader.js"></script>

</html>
